<template>
	<view class="VIPMall">
		<view class="VIPMall_top">
			<view class="VIPMall_top_header">
				<view @click="backReturn" class="VIPMall_top_header_back">
					<image src="../../../static/home/back_White.png" mode="widthFix"></image>
				</view>
				<view class="VIPMall_top_header_text">
					<!-- 淘宝 -->
					{{typename()}}
				</view>
			</view>
			<view class="VIPMall_top_search">
				<u-search v-model="val" @clear="clear" @search="search" placeholder="搜索" bgColor="#ffffff"
					:showAction="false" class="search_box_top_input" :clearabled="true"></u-search>
			</view>
			<view class="ListBox_tabs">
				<view @click="tab(item.id)" :class="tabNum == item.id?'ListBox_tabs_li_active':''"
					v-for="(item , index) in tabsarr" class="ListBox_tabs_li">
					{{item.name}}
				</view>
			</view>
			<!-- <view class="VIPMall_top_tabs">
				<view class="VIPMall_top_tabs_overflwo">
					<view @click="typeQuery(item.id)" v-for="(item,index) in types"
						:class="queryInquire.typeId == item.id ?'VIPMall_top_tabs_list_active':''"
						class="VIPMall_top_tabs_list">
						{{item.name}}
					</view>
				</view>
			</view> -->
		</view>
		<scroll-view scroll-y="true" class="VIPMall_content" @scrolltolower="addmodle()">
			<view
				style="display: flex;justify-content: space-between;flex-wrap: wrap;padding: 10upx;padding-bottom: 0;">
				<view @click="detail(item.tao_id)" v-for="(item,index) in List" class="VIPMall_content_list">
					<view class="VIPMall_content_list_image">
						<image :src="item.pict_url" mode=""></image>
					</view>
					<view class="VIPMall_content_list_content">
						<view class="VIPMall_content_list_content_title">
							{{item.title}}
						</view>
						<view class="VIPMall_content_list_content_center">
							<view class="VIPMall_content_list_content_center_left">
								淘宝价 ¥{{Number(item.size)}}
							</view>
							<view class="VIPMall_content_list_content_center_left">
								已售{{item.sellCount}}
							</view>
						</view>
						<view class="VIPMall_content_list_content_bottom">
							<view class="VIPMall_content_list_content_bottom_left">
								<text>券后价&nbsp;¥</text>
								{{Number(item.quanhou_jiage)}}
							</view>
							<view class="VIPMall_content_list_content_bottom_right">
								<view class="VIPMall_content_list_content_bottom_right_border_box">
									<view class="VIPMall_content_list_content_bottom_right_border">
										<text>￥{{Number(item.coupon_info_money)}}</text>
										<text>元券</text>
									</view>
								</view>
							</view>
						</view>

						<view class="VIPMall_content_list_content_yongjin">
							<view class="VIPMall_content_list_content_yongjin_left">
								佣金
							</view>
							<view class="VIPMall_content_list_content_yongjin_right">
								<view class="VIPMall_content_list_content_yongjin_right_view">
									￥{{commission(item)}}
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view style="overflow: hidden;">
				<u-loadmore style="width: 100%;" @loadmore="addmodle" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		taobaolist,
		bootgoodsTypeselect,
		bootsysConfigcommissionpercent
	} from "@/api/home";
	export default {
		data() {
			return {
				val: '',
				status: "loadmore",
				queryInquire: {
					pageSize: 10,
					page: 1,
				},
				loding: false,
				List: [],
				over: false,
				types: [],
				type: null,
				tabNum: '',
				tabsarr: [{
					id: 1,
					name: '女装'
				}, {
					id: 2,
					name: '母婴'
				}, {
					id: 3,
					name: '美妆'
				}, {
					id: 4,
					name: '居家日用'
				}, {
					id: 5,
					name: '鞋品'
				}, {
					id: 6,
					name: '美食'
				}, {
					id: 7,
					name: '文娱车品'
				}, {
					id: 8,
					name: '数码家电'
				}, {
					id: 9,
					name: '男装'
				}, {
					id: 10,
					name: '内衣'
				}, {
					id: 11,
					name: '箱包'
				}, {
					id: 12,
					name: '配饰'
				}, {
					id: 13,
					name: '户外运动'
				}, {
					id: 14,
					name: '家装家纺'
				}],
			}
		},
		onLoad(data) {
			this.bootsysConfigcommissionpercent()
			this.queryInquire.type = Number(data.type)
			this.queryInquire.page = 1
			this.List = []
			this.over = false
			this.status = 'loadmore'
			this.addmodle();
			// this.bootgoodsTypeselect()
		},
		onReachBottom() {
			this.addmodle();
		},
		methods: {
			commission(item) {
				return ((item.tkfee3 * 0.9) * this.bilv).toFixed(2);
				// return row
			},
			bootsysConfigcommissionpercent() {
				bootsysConfigcommissionpercent().then(res => {
					this.bilv = Number(res.data) / 100
					console.log(this.bilv)
				})
			},
			tab(id) {
				if (this.tabNum == id) {
					this.tabNum = ''
					this.queryInquire.page = 1
					this.queryInquire.categoryId = this.tabNum
					this.List = []
					this.over = false
					this.status = 'loadmore'
					this.val = ''
					this.queryInquire.queryParams = '';
					this.addmodle();
				} else {
					this.tabNum = id
					this.queryInquire.page = 1
					this.queryInquire.categoryId = this.tabNum
					this.List = []
					this.over = false
					this.status = 'loadmore'
					this.val = ''
					this.queryInquire.queryParams = '';
					this.addmodle();
				}

			},
			typename() {
				if (this.queryInquire.type == 0) {
					return '淘宝'
				}
				if (this.queryInquire.type == 1) {
					return '天猫'
				}
				if (this.queryInquire.type == 2) {
					return '天猫国际'
				}
				if (this.queryInquire.type == 3) {
					return '天猫超市'
				}
				if (this.queryInquire.type == 4) {
					return '聚划算'
				}
				return '淘宝'
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/index/Taobaodetail/Taobaodetail?id=' + id
				});
			},
			clear(e) {
				this.queryInquire.queryParams = '';
				this.queryInquire.page = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			search(e) {
				this.queryInquire.queryParams = e;
				this.queryInquire.page = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.tabNum = ''
				this.queryInquire.categoryId = ''
				this.addmodle();
			},
			typeQuery(id) {
				this.queryInquire.typeId = id
				this.queryInquire.page = 1
				this.List = []
				this.over = false
				this.status = 'loadmore'
				this.addmodle();
			},
			bootgoodsTypeselect() {
				bootgoodsTypeselect({}).then(res => {
					this.types = res.data
				})
			},
			addmodle() {
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore") {
					this.taobaolist();
				}
			},
			taobaolist() {
				this.status = "loading";
				taobaolist(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data);
							if (res.data.length < 10) {
								this.over = true;
								setTimeout(() => {
									this.status = "nomore";
								}, 0);
							} else {
								this.queryInquire.page++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			backReturn() {
				uni.navigateBack({
					// animationType: 'slide-out-right',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.VIPMall {
		.VIPMall_top {
			padding-top: calc(8upx + var(--status-bar-height));
			background-image: linear-gradient(to right, #FE3D47, #FC773D);

			.VIPMall_top_header {
				padding: 6upx 0;
				position: relative;
				justify-content: center;
				display: flex;

				.VIPMall_top_header_back {
					padding: 0 32upx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);

					image {
						width: 18upx;
					}
				}

				.VIPMall_top_header_text {
					font-size: 34upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 48upx;
				}
			}

			.VIPMall_top_search {
				padding: 14upx 32upx;
			}

			.VIPMall_top_tabs {
				padding: 0 32upx;
				padding-bottom: 14upx;

				.VIPMall_top_tabs_overflwo {
					white-space: nowrap;
					overflow-y: hidden;

					.VIPMall_top_tabs_list {
						display: inline-block;
						margin-right: 32upx;
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40upx;
					}

					.VIPMall_top_tabs_list_active {
						// font-size: 32upx;
						transform: scale(1.2);
						transform-origin: center center;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 44upx;
					}
				}
			}
		}

		.VIPMall_content {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - 6upx - 256upx);
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.VIPMall_content_list {
				width: calc((100% - 10upx) / 2);
				margin-bottom: 10upx;

				.VIPMall_content_list_image {
					width: 100%;
					height: 360upx;
					border-radius: 16upx 16upx 0px 0px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.VIPMall_content_list_content {
					background-color: #FFFFFF;
					// height: 160upx;
					border-radius: 0 0 16upx 16upx;
					padding: 16upx 20upx 10upx 20upx;

					.VIPMall_content_list_content_title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.9);
						line-height: 40upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.VIPMall_content_list_content_center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 18upx;
						color: #888;
						padding: 10upx 0;
						text-overflow: ellipsis;
						white-space: nowrap;
					}


					.VIPMall_content_list_content_bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.VIPMall_content_list_content_bottom_left {
							color: #fc4d52;
							white-space: nowrap;
							font-size: 36upx;
							position: relative;
							line-height: 44upx;
							height: 44upx;

							text {
								font-size: 9upx;
							}
						}

						.VIPMall_content_list_content_bottom_right {
							.VIPMall_content_list_content_bottom_right_border_box {
								overflow: hidden;

								.VIPMall_content_list_content_bottom_right_border {
									font-style: normal;
									border-radius: 6upx;
									text-align: center;
									// border: 2upx solid #fd5a5f;
									text-overflow: ellipsis;
									white-space: nowrap;
									// background: #fff;
									color: #FFFFFF;
									background: linear-gradient(90deg, #EEC75D 0%, #F5E3C5 100%);
									padding: 6upx 16upx;
									font-size: 18upx;
									position: relative;

									&:after {
										content: '';
										position: absolute;
										left: -4px;
										top: 50%;
										margin-top: -3px;
										background: #fff;
										display: block;
										width: 5px;
										height: 5px;
										content: "";
										border-radius: 10px;
										border: 1px solid #FFFFFF;
									}

									&:before {
										position: absolute;
										left: auto;
										top: 50%;
										margin-top: -3px;
										background: #fff;
										display: block;
										width: 5px;
										height: 5px;
										content: "";
										border-radius: 10px;
										border: 1px solid #FFFFFF;
										right: -4px;
									}

									text {
										&:last-child {
											// border-right: 1px dashed #fd5a5f;
											// position: relative;
											margin-right: 8upx;

										}

										&:first-child {
											// border-right: 1px dashed #fd5a5f;
											// padding: 0 4upx;
											padding: 0 2upx;
										}
									}
								}
							}
						}
					}

					.VIPMall_content_list_content_yongjin {
						display: flex;
						margin-top: 16upx;

						.VIPMall_content_list_content_yongjin_left {
							background: linear-gradient(180deg, #868686 0%, #333333 100%);
							opacity: 1;
							border-radius: 8upx 0px 0px 8upx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 5upx 10upx;
							font-size: 16upx;
							font-family: PingFang SC;
							font-weight: 400;
							// line-height: 42upx;
							white-space: nowrap;
							color: #F1D388;

						}

						.VIPMall_content_list_content_yongjin_right {
							// height: 100%;
							// border: 2upx solid #707070;
							background: linear-gradient(180deg, #868686 0%, #333333 100%);
							opacity: 1;
							border-radius: 0px 8upx 8upx 0px;
							display: flex;
							justify-content: center;
							align-items: center;

							.VIPMall_content_list_content_yongjin_right_view {
								width: calc(100% - 4upx);
								height: calc(100% - 4upx);
								background-color: #ffffff;
								border-radius: 0px 8upx 8upx 0px;
								font-size: 16upx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
								padding: 5upx 10upx;

							}
						}
					}
				}
			}

		}
	}

	.ListBox_tabs {
		padding: 20upx 40upx;
		padding-bottom: 30upx;
		overflow-y: hidden;
		white-space: nowrap;
		// background-color: #FC6758;

		.ListBox_tabs_li {
			display: inline-block;
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 41upx;
			color: #ffffff;
			opacity: 1;
			margin-right: 53upx;
			position: relative;

			&:last-child {
				margin: 0;
			}
		}

		.ListBox_tabs_li_active {
			color: #ffffff;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				bottom: -20upx;
				background-color: #ffffff;
				width: 49upx;
				height: 8upx;
				background: #ffffff;
				opacity: 1;
				border-radius: 4upx;
				left: 50%;
				transform: translate(-50%);
			}
		}
	}
</style>
<style>
	page {
		background-color: #E3E5E8;
	}
</style>
